<template>
    <div id="HomeArtItem">
        <van-pull-refresh v-model="loading" @refresh="getArticlesList()" success-text="刷新成功">
            <van-list v-model:loading="loading"  :finished="isFinished" finished-text="没有更多了"
                @load="getArticlesList(true)">
                <art-item-component v-for="item in articlesList" :key="item.art_id" :item="item" :showAction="true"
                    @removeArticleItem="removeArticleItem" />
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script  setup>
import { PullRefresh as vanPullRefresh, List as vanList, Toast } from 'vant'
import { ref, defineProps } from 'vue'
import ArtItemComponent from './ArtItemComponent.vue'
import { getArticles } from '@/api/index'

const props = defineProps({
    channel_id: {
        type: Number,
        default: 0,
        required: true
    }
})
// 文章内容加载
const articlesList = ref([])
const preTimeStamp = ref(Date.now())
const loading = ref(true)
const isFinished = ref(false)
const getArticlesList = async (isList = false) => {
    loading.value = true
    Toast.loading({
        message: '加载中...',
        forbidClick: true
    })
    const { data: { data: { pre_timestamp: preTime, results: articles } } } = await getArticles(props.channel_id, !preTimeStamp.value ? Date.now() : preTimeStamp.value)
    if (articles.length <= 0) isFinished.value = true
    articlesList.value = isList ? [...articlesList.value, ...articles] : [...articles, ...articlesList.value]
    preTimeStamp.value = preTime
    loading.value = false
    Toast.clear()
}

const removeArticleItem = (currentId) => {
    articlesList.value = articlesList.value.filter(item => {
        return item.art_id !== currentId
    })
    if (articlesList.value.length <= 8) getArticlesList(true)
}
</script>

<style lang='less'>
</style>
